<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<!-- Basic Page Needs -->
        <meta charset="utf-8">
        <title>选座</title>
        <meta name="description" content="A Template by Gozha.net">
        <meta name="keywords" content="HTML, CSS, JavaScript">
        <meta name="author" content="Gozha.net">
    <!-- Mobile Specific Metas-->  
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta content="telephone=no" name="format-detection">

    <!-- Stylesheets -->
	<!--后加的 选座-->
	    <link rel="stylesheet" type="text/css" href="css/seat-charts.css" /> 
        
        <link rel="stylesheet" href="layui/css/layui.css" media="all">
        
        <!-- Fonts -->
		<!-- Font awesome - icon font -->
		<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
		<!-- Mono font -->
		<link href='http://fonts.useso.com/css?family=PT+Mono' rel='stylesheet' type='text/css'>
		<!-- Roboto -->
		<link href='http://fonts.useso.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
		
		<!-- Mobile menu -->
		<link href="css/gozha-nav.css" rel="stylesheet" />
		<!-- Select -->
		<link href="css/external/jquery.selectbox.css" rel="stylesheet" />
		
		<!-- REVOLUTION BANNER CSS SETTINGS -->
		<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css"
			media="screen" />
		
		<!-- Custom -->
		<link href="css/style-before.css?v=1" rel="stylesheet" />
		<link href="css/style.css?v=1" rel="stylesheet" />
		
		<!-- Modernizr -->
		<script src="js/external/modernizr.custom.js"></script>
		<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
		<script type="text/javascript" src="js/jquerysession.js"></script>
</head>
<body>
    <div class="wrapper place-wrapper">
    <input type="hidden" id="tag1" value="<%=request.getParameter("scheduleid") %>">
    <input type="hidden" id="tag2" value="<%=request.getParameter("movieid") %>">
        <!-- Header section -->
        <jsp:include page="header.jsp"></jsp:include>
       
        <!-- Main content -->
        <div class="place-form-area">
        <section class="container">
            <div class="order-container">
                <div class="order">
                    <img class="order__images" alt='' src="images/tickets.png">
                    <p class="order__title">购买电影票 <br><span class="order__descript">祝您观影愉快</span></p>
                    <div class="order__control">
                        <a href="#" class="order__control-btn active">购买</a>
                        
                    </div>
                </div>
            </div>
                <div class="order-step-area">
                    
                    <div class="order-step second--step">1. 请选择座位</div>
                </div>
            <div class="choose-sits">
                <div class="choose-sits__info choose-sits__info--first">
                    <ul>
                        <li class="sits-price marker--none"><strong>Price</strong></li>
                        <li class="sits-price price"></li>
                    </ul>
                </div>
                <div class="choose-sits__info">
                    <ul>
                        <li class="sits-state sits-state--not">已出售</li>
                        <li class="sits-state sits-price--cheap">可选择</li>
						<li class="sits-state sits-state--your">你的选择</li>
                    </ul>
                </div>
                <div class="col-sm-12 col-lg-10 col-lg-offset-1">
                <div class="sits-area hidden-xs">
                    <div class="sits-anchor">screen</div>
                    <div class="sits">
                        <aside class="sits__checked">
                            <div class="checked-place" >
                                <span id="seats_chose"></span>
                            </div>
                            <div class="checked-result" id="total_price">
                                                                         ￥0
                            </div>
                        </aside>
                    </div>
                </div>
            </div>
        </div>
     </section>
        <div class="clearfix"></div>
        <form id='film-and-time' class="booking-form" method='get' action='book3-buy.html'>
            <input type='text' name='choosen-number' class="choosen-number">
            <input type='text' name='choosen-number--cheap' class="choosen-number--cheap">
            <input type='text' name='choosen-number--middle' class="choosen-number--middle">
            <input type='text' name='choosen-number--expansive' class="choosen-number--expansive">
            <input type='text' name='choosen-cost' class="choosen-cost">
            <input type='text' name='choosen-sits' class="choosen-sits">
            <div class="booking-pagination booking-pagination--margin">
                    <a href="movie-page-full.jsp?movieid=<%=request.getParameter("movieid")%>" class="booking-pagination__prev">
                        <span class="arrow__text arrow--prev">上一步</span>
                        <span class="arrow__info">选时间</span>
                    </a>
                    <a href="#seats_chose" class="booking-pagination__next" id="btn">
                        <span class="arrow__text arrow--next">下一步</span>
                        <span class="arrow__info">去支付</span>
                    </a>
            </div>
        </form>
        <div class="clearfix"></div>
        <jsp:include page="footer.jsp"></jsp:include>
    </div>
    
    <jsp:include page="LoginAndRegister.jsp"></jsp:include>
    
   		<script type="text/javascript" src="js/jquery.seat-charts.min.js"></script>
		<script src="layui/layui.js" charset="utf-8"></script>
	<!-- JavaScript-->
        <!-- jQuery 1.9.1--> 
        <script src="http://ajax.useso.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/external/jquery-1.10.1.min.js"><\/script>')</script>
        <!-- Migrate --> 
        <script src="js/external/jquery-migrate-1.2.1.min.js"></script>
        <!-- Bootstrap 3--> 
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
		<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
        <!-- Mobile menu -->
        <script src="js/jquery.mobile.menu.js"></script>
         <!-- Select -->
        <script src="js/external/jquery.selectbox-0.2.min.js"></script>
        <!-- Form element -->
        <script src="js/external/form-element.js"></script>
        <!-- Form validation -->
        <script src="js/form.js"></script>
        <!-- Custom -->
		
		<script src="js/custom.js"></script> 
        <script src="js/customf.js"></script> 
        
		<script type="text/javascript">
		//获取上一个页面传过来的值
		var scheduleid=$("#tag1").val();
		console.log("排期id："+scheduleid);
		
		var movieid=$("#tag2").val();
		console.log("电影id："+movieid);
		
		var price; //电影票价
		var sc;
		//影厅布局
		layui.use('layer',function(){
			var layer = layui.layer;
	        $(document).ready(function() {
			    var $cart = $('#seats_chose'), //座位区
			    $tickects_num = $('#tickects_num'), //票数
			    $total_price = $('#total_price'); //票价总额
				$.ajax({
					url:"getSeatInfo",
					type:"get",
					dataType:"json",
					data:{
						movieid:movieid,
						scheduleid:scheduleid
					},
					success:function(data){
					    sc = $('.sits-area').seatCharts({
							map:data.mh[0].galleryful.split(","),
							naming: { //设置行列等信息
								top: true, //不显示顶部横坐标（行） 
								getLabel: function(character, row, column) { //返回座位信息 
									return column;
								}
							},
							legend: { //定义图例
								node: $('#legend'),
								items: [
									['c', 'available', '可选座'],
									['c', 'unavailable', '已售出']
								]
							},
							click: function() {
								if (this.status() == 'available') { //若为可选座状态，添加座位
									if (sc.find('selected').length + 1 <= 2) { //只能选2个座
										$('<span class=choosen-place>' + (this.settings.row + 1) + '排' + this.settings.label + '座</span>')
											.attr('id', 'cart-item-' + this.settings.id)
											.data('seatId', this.settings.id)
											.appendTo($cart);
										$tickects_num.text(sc.find('selected').length + 1); //统计选票数量
										$total_price.text(getTotalPrice(sc) + price); //计算票价总金额
										return 'selected';
									} else {
										layer.msg("最多只能选2个座位", {
											icon : 7,
											time : 1000
										});
										return 'available';
									}
								} else if (this.status() == 'selected') { //若为选中状态
									$tickects_num.text(sc.find('selected').length - 1); //更新票数量
									$total_price.text(getTotalPrice(sc) - price); //更新票价总金额
									$('#cart-item-' + this.settings.id).remove(); //删除已预订座位
									return 'available';
								} else if (this.status() == 'unavailable') { //若为已售出状态
									return 'unavailable';
								} else {
									return this.style();
								}
							}
						});
						//设置已售出的座位
						sc.get(data.s).status('unavailable');
						//设置票价
						$(".price").text("￥"+data.m[0].moviepirce);
						//计算票价需要
						price=data.m[0].moviepirce;			
					}	
				});	
			 });	
			 //下一步 跳转页面+传值
			 $("#btn").click(function(){
				//被选的座位
				var seat = new Array();
				sc.find('selected').each(function() {

					seat.push(this.settings.id);
				});

			    if(seat.length>0){
		
			    	location.href = "http://localhost:8080/My_Popcorn/PayTicket?movieid="+movieid+"&scheduleid="+scheduleid+"&seat="+seat+"&price="+price+"&total_price="+$('#total_price').text();
				}else{
					layer.msg("请选择一个座位", {
						icon : 7,
						time : 1000
					});
			    }
		    });
						
			function getTotalPrice(sc) { //计算票价总额
				var total = 0;
				sc.find('selected').each(function() {
					total += price;
				});
				return total;
				}
			});
	</script>
		
	<jsp:include page="JudegeLogin.jsp"></jsp:include>
</body>
</html>
